<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 600px;
            height: 600px;
            display: flex;
        }
        .img{
            width: 200px;
            height: 200px;
            background-size: 100% 100%;
            border: 1px solid #000;
        }
        .mask{
            width: 80px;
            height: 80px;
            background: rgb(127, 124, 120);
            opacity: 0.7;
            position: fixed;
        }
        .box{
            width: 119px;
            height: 119px;
            border: 1px solid #000;
            background-size: 300% 300%;
        }
        .btn{
            display: block;
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="content">

        <div class="img">
            <div class="mask"></div>
        </div>
        <div class="box">
            
        </div>
        <button class="btn">变换</button>
    </div>

</body>
</html>
<script>


const content = document.querySelector('.content')

class Swipt{
    constructor(dom){
        this.container = typeof queryDom === 'string'
        ? document.querySelector(dom)
        : dom
        this.mask = this.container.querySelector('.mask')
        this.show = this.container.querySelector('.img')
        this.box = this.container.querySelector('.box')
        this.btn = this.container.querySelector('.btn')

        this.maskWidth = parseFloat(getComputedStyle(this.mask).width)
        this.maskHeight = parseFloat(getComputedStyle(this.mask).height)

        this.xhr() //ajax 请求数据
        this.bindBtnsClick()//点击按钮 更换图片
        this.move() // mask 跟随鼠标移动 放大图 跟随鼠标移动
        this.enterOrLeaveShow()//鼠标移入移出，mask 显示与隐藏
    }
    //ajax 请求数据
    xhr(){
        const img = document.querySelector('.img');
        const box = document.querySelector('.box');
        const xhr = new XMLHttpRequest();
        xhr.open('get', 'https://dog.ceo/api/breeds/image/random', true);
        xhr.send();
        xhr.onload = function() {
            const urlDog = JSON.parse(xhr.response).message;
            img.style.backgroundImage = `url(${urlDog})`;
            box.style.backgroundImage = `url(${urlDog})`;
            console.log(JSON.parse(xhr.response));
            
        }
            xhr.onerror = function(err) {
            console.log('err', err);
        }

    }
    //点击按钮 更换图片
    bindBtnsClick(){
        this.btn.addEventListener('click',() => {
            this.xhr()
        })
    }
    //鼠标移入移出，mask 显示与隐藏
    enterOrLeaveShow(){
        this.show.addEventListener('mouseout',() => {
        this.mask.style.display = 'none'
        this.box.style.display = 'none'
    })
    this.show.addEventListener('mouseover',() => {
        this.mask.style.display = 'block'
        this.box.style.display = 'block'
    })

    }
    // mask 跟随鼠标移动 放大图 跟随鼠标移动
    move(){
        let X = 0
        let Y = 0
        this.show.addEventListener('mousemove',(e) => {
            const showWidth = this.show.offsetWidth
            const showHeight = this.show.offsetHeight
            this.MaxWidth = showWidth - this.maskWidth
            this.MaxHeight = showHeight - this.maskHeight

            X = e.clientX - this.container.offsetTop - this.maskWidth / 2
            Y = e.clientY - this.container.offsetLeft - this.maskHeight / 2
            // console.log(X,Y);

            // 判断是否移出窗口
            if(X < 0){
                X = 0
            }else if(X > this.MaxWidth){
                X = this.MaxWidth
            }
            if(Y < 0){
                Y = 0
            }else if(Y > this.MaxHeight){
                Y = this.MaxHeight
            }
            this.mask.style.top = Y + 'px'
            this.mask.style.left = X + 'px'


            const [ bigWidth , bigHeight] = getComputedStyle(this.box).backgroundSize.split(' ').map(num => parseFloat(num))
            // console.log(bigWidth , bigHeight);


            //大图跟随小图移动
            const boxWidth = X * bigWidth / showWidth
            const boxHeight = Y * bigHeight / showHeight
            this.box.style.backgroundPosition = `-${boxWidth}px -${boxHeight}px`

        })
    }
}

const init = new Swipt(content)


</script>